<template>
	<div>
		<van-nav-bar title="预定配置" left-arrow @click-left="$utils.back($route.path)" />
		<div class="register-form mg-24 pb-170">
			<van-cell-group class="apply_main fs-28">
				<van-field class="fs-32" v-model="pageData.Name" clearable label="名称" placeholder="请输入名称" />
				<van-field label="售卖方式" class="fs-32">
					<template #input>
						<van-radio-group v-model="saleType" class="flex">
							<van-radio name="0" class="mr-24 fs-28" checked-color="#16AD56">天</van-radio>
							<van-radio name="1" class="fs-28" checked-color="#16AD56">小时</van-radio>
						</van-radio-group>
					</template>
				</van-field>

				<van-field class="fs-32" v-model="pageData.BookDay" clearable label="提前预定(天)" placeholder="请输入提前预定天数" />
				<van-field v-show="saleType === '0'" class="fs-32" v-model="pageData.LeadTime" clearable label="提前时间(分钟)"
					placeholder="请输入提前时间" />
				<van-field v-show="saleType === '0'" class="fs-32" v-model="pageData.LaterTime" clearable label="推后时间(分钟)"
					placeholder="请输入推后时间" />
				<van-field class="fs-32" v-model="pageData.OutDoorDeviceId" clearable label="绑定大门设备" placeholder="请输入设备ID" />
				<van-field label="用户是否能开大门" class="fs-32">
					<template #input>
						<van-radio-group v-model="isOpenOutDoor" class="flex">
							<van-radio name="1" class="mr-24 fs-28" checked-color="#16AD56">是</van-radio>
							<van-radio name="0" class="fs-28" checked-color="#16AD56">否</van-radio>
						</van-radio-group>
					</template>
				</van-field>
				<van-field v-show="saleType !== '0'" label="是否清扫房间" class="fs-32">
					<template #input>
						<van-radio-group v-model="noNeedClean" class="flex">
							<van-radio name="1" class="mr-24 fs-28" checked-color="#16AD56">是</van-radio>
							<van-radio name="0" class="fs-28" checked-color="#16AD56">否</van-radio>
						</van-radio-group>
					</template>
				</van-field>
				<div class="project mr-24 pb-24">
					<div class="apply_title">预定信息填写项</div>
					<van-checkbox-group v-model="bookInfoTypes" class="write">
						<van-checkbox v-for="(item, index) in checkedList" :key="index" :name="item.value" shape="square"
							checked-color="#16AD56">{{ item.text }}</van-checkbox>
					</van-checkbox-group>
				</div>
				<div class="project mr-24 pb-24">
					<div class="apply_title">预定信息必填项</div>
					<van-checkbox-group v-model="bookInfoRequiredTypes" class="write">
						<van-checkbox v-for="(item, index) in checkedList" :key="index" :name="item.value" shape="square"
							checked-color="#16AD56">{{ item.text }}</van-checkbox>
					</van-checkbox-group>
				</div>
				<div class="mr-24 pd-24 flex flex-d-c">
					<div class="flex flex-s-c">
						<div class="apply_title">关联商品</div>
						<div @click="goProduct">选择商品<svg-icon icon-class="right" class="fs-24 ml-10" @goPage="goProduct" /></div>
					</div>
					<div v-if="productNames.length > 0" @click="goProduct">
						<div v-for="(item, index) in productNames" :key="index" class="text-show-line-1">{{ item }}</div>
					</div>
				</div>
			</van-cell-group>
		</div>
		<div class="plr-40 ptb-24 bg-white fixed-bottom" v-if="isNew">
			<van-button size="large" class="bg-primary color-white br-44" @click="submit">提交</van-button>
		</div>
		<div v-else class="roomBtn">
			<button @click="submit" class="repair">修改</button>
			<button @click="deleteSetting" class="btn">删除</button>
		</div>
		<van-popup v-model="showProduct" position="bottom" style="height:100vh;">
			<productList @close="showProduct = false" :productIds="productIds" :productNames="productNames" @choose="choose" />
		</van-popup>
	</div>
</template>
<script>
import { ProductBookSettingAddOrEdit, GetProductBookSetting, ProductBookSettingDelete } from 'api/teaHouse'
import productList from './productList.vue'
export default {
	components: {
		productList
	},
	props: {
	},
	data() {
		return {
			pageData: {

			},
			id: 0, //技师id(默认为0,提交申请之后生成一个)
			finished: false,
			loading: false,
			blank: false,  // 是否为空数据
			checkedList: [
				{ text: '姓名', value: '1' },
				{ text: '手机号', value: '2' },
				{ text: '身份证', value: '3' },
				{ text: '人数', value: '4' },
				{ text: '备注', value: '5' },
				{ text: '预计到达时间', value: '6' }
			],
			saleType: '0',
			isOpenOutDoor: '0', //茶室用户是否能自己开门 0否 1是
			noNeedClean: '0', //茶室是否清扫房间 0否 1是
			isNew: true, //是否新增
			bookInfoTypes: [],
			bookInfoRequiredTypes: [],
			showProduct: false,
			productNames: [],
			productIds: [],
		}
	},
	watch: {

	},
	created() {
		if (this.$route.query.id) {
			this.id = this.$route.query.id
			this.isNew = false
			this.GetProductBookSetting()
		}
	},
	mounted() {

	},
	methods: {

		goProduct() {
			this.showProduct = true
		},
		GetProductBookSetting() {
			GetProductBookSetting(this.id).then(res => {
				if (res.Data) {
					this.saleType = res.Data.SaleType + ''
					this.isOpenOutDoor = res.Data.IsOpenOutDoor + ''
					this.pageData = res.Data
					if (res.Data.BookInfoRequiredTypes !== '') {
						this.bookInfoRequiredTypes = res.Data.BookInfoRequiredTypes.split(',')
					}
					if (res.Data.BookInfoTypes) {
						this.bookInfoTypes = res.Data.BookInfoTypes.split(',')
					}
					if (res.Data.ProductList.length > 0) {
						res.Data.ProductList.forEach((ele) => {
							this.productNames.push(ele.ProductName)
							this.productIds.push(ele.ID)
						})
					}
				}
			})
		},

		submit() {
			if (this.pageData.Name == '') {
				this.$toast('请输入名称')
				return
			}
			if (this.pageData.BookDay == '') {
				this.$toast('请输入提前预定天数')
				return
			}
			if (this.pageData.LeadTime == '') {
				this.$toast('请输入提前时间')
				return
			}
			if (this.pageData.LaterTime == '') {
				this.$toast('请输入推后时间')
				return
			}
			this.pageData.isOpenOutDoor = this.isOpenOutDoor
			this.pageData.noNeedClean = this.noNeedClean
			this.pageData.saleType = this.saleType
			this.pageData.bookInfoTypes = this.bookInfoTypes.toString()
			this.pageData.bookInfoRequiredTypes = this.bookInfoRequiredTypes.toString()
			if (this.pageData.ProductIds === '') {
				this.$toast('请选择商品!')
				return
			}
			this.pageData.ProductIds = '|' + this.productIds.join('|') + '|'
			ProductBookSettingAddOrEdit(this.pageData).then(res => {
				if (res.Data) {
					this.$router.push('reserveSettingList')
				} else {
					this.$toast(res.Msg)
				}
			})
		},
		updateCheckIn() {
			console.log(this.pageData, "xiugai")
			this.pageData.saleType = this.saleType
			this.$emit('checkIn', this.pageData, this.checkInIndex)
		},
		deleteSetting() {
			this.$dialog.confirm({
				message: '确定要删除该配置？'
			})
				.then(() => {
					this.ProductBookSettingDelete(this.pageData.ID)
				})
				.catch(() => {
					// on cancel
				})
		},
		ProductBookSettingDelete(ids) {
			ProductBookSettingDelete(ids).then(res => {
				if (res.Data) {
					this.$utils.back(this.$route.path)
					setTimeout(() => {
						this.$toast('配置删除成功')
					}, 500)
				}
			})
		},
		choose(ids, list) {
			this.productIds = ids
			this.productNames = list
			this.showProduct = false
		}
	},
}
</script>
<style lang="scss" scoped>
.remark {
	background: #f7f7f7;
	padding-left: 32px !important;
}

.idtype {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #ebedf0;
	margin-left: 10px;
}

.project {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border-bottom: 1px solid #ebedf0;
	margin-left: 20px;
}

.idtype_title {
	font-size: 32px;
	position: relative;
	width: 210px;
	margin-left: 20px;
}

.apply_title {
	width: 280px;
	margin: 20px 0 20px 5px;
	font-size: 32px;
}

.project:last-child {
	border-bottom: none;
}

[class*=van-hairline]::after {
	border: none;
}

.project {
	.van-cell {
		padding-left: 0;
	}
}

.left-star {
	padding-left: 15px;

	&::before {
		content: "*";
		color: #FF0202;
		position: absolute;
		font-size: 28px;
		top: 5px;
		left: 0;
	}
}

/deep/.van-dropdown-menu__bar {
	height: 30px;
	line-height: 30px;
	background: none;
	box-shadow: none;
}

/deep/.van-dropdown-menu {
	width: calc(100% - 105px);
}

/deep/.van-dropdown-menu__title {
	width: 100%;
}

/deep/.van-dropdown-menu__title::after {
	border: none;
}

.roomBtn {
	position: fixed;
	bottom: 0;
	width: 100%;
	display: flex;
	justify-content: space-around;
	padding: 24px;
}

.repair {
	width: 324px;
	height: 80px;
	line-height: 80px;
	background: $primary15;
	border-radius: 44px;
	text-align: center;
	color: #fff;
	font-size: 34px;
}

.btn {
	width: 324px;
	height: 80px;
	line-height: 80px;
	background: #FF0202;
	border-radius: 44px;
	text-align: center;
	color: #fff;
	font-size: 34px;
}

.write {
	display: flex;
	flex-wrap: wrap;
}

/deep/.van-checkbox__label {
	margin: 0 10px 0px 5px;
}

/deep/.van-checkbox {
	margin-bottom: 15px;
}

/deep/.van-field__label {
	width: 140px;
	margin-right: 20px;
}
</style>
